<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>题目详情</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {

		});
		function judge()
		{
			var answer=document.getElementById("answer").value;
			var userAnswer=document.getElementById("userAnswer").value;
			var answerSituation=document.getElementById("answerSituation").value;
			var ctfsubjectId=document.getElementById("ctfsubjectId").value;
			var ctfSetId=document.getElementById("ctfSetId").value;
			if(answer==userAnswer)
			{

				$("#answerSituation").html("已解答");
				$.ajax({
					type: "POST",
					url: "${ctx}/resource/resourceCtfSubject/saveAnswer",
					data: {
						answer:answer,
						ctfsubjectId:ctfsubjectId
					},
					success: function () {
						alertx("回答正确");
						window.location.href="${ctx}/resource/resourceCtfSubject/stuEnterCtfSetList?ctfSetId=${ctfSetId}";
					},
					error:function(){
					}
				});

			}else{
				alertx("回答错误！");
			}



		}
//		function GetRTime(endTime){
////			var endTime="2017/07/03 20:27:30";
////			var endTime=document.getElementById('endTime').value;
//			var EndTime= new Date(endTime);
//			var NowTime = new Date();
//			var t =EndTime.getTime() - NowTime.getTime();
//			var d=0;
//			var h=0;
//			var m=0;
//			var s=0;
//			if(t>=0){
//				d=Math.floor(t/1000/60/60/24);
//				h=Math.floor(t/1000/60/60%24);
//				m=Math.floor(t/1000/60%60);
//				s=Math.floor(t/1000%60);
//			}else{
//				var id=document.getElementById('sceneEnvironmentInstanceId').value;
////				var id="1234";
//				clearInterval(auto);
//				end(id);
//			}
//			if(d<10)
//				d="0"+d;
//			if(h<10)
//				h="0"+h;
//			if(m<10)
//				m="0"+m;
//			if(s<10)
//				s="0"+s;
////			document.getElementById("t_d").innerHTML = d ;
//			document.getElementById("t_h").innerHTML = h ;
//			document.getElementById("t_m").innerHTML = m ;
//			document.getElementById("t_s").innerHTML = s ;
//
//
//
//		}
//		auto=setInterval(GetRTime('2017/07/03 20:27:30'),0);

		var auto;

		function addTime() {
			var addTimeNumber=document.getElementById("addTimeNumber").value;
			var increaseNumber=document.getElementById("increaseNumber").value;
//			alertx(parseInt(addTimeNumber)+" "+parseInt(increaseNumber));

			if(parseInt(addTimeNumber)>=parseInt(increaseNumber))
			{	$('#addTimeA').removeAttr('onclick');
				document.getElementById("addTimeA").style.color="#909090";
				alertx("延长时间次数已用尽");
			}else{
				clearInterval(auto);
				var instanceId=document.getElementById("instanceId").value;
				var ctfEnvironmentId=document.getElementById("ctfEnvironmentId").value;
				$.ajax({
					type: "POST",
					url: "${ctx}/resource/resourceCtfSubject/addTime",
					data: {
						ctfEnvironmentId:ctfEnvironmentId,
						instanceId:instanceId
					},
					success: function (endTime) {

						var num=parseInt(addTimeNumber)+1;

						if(num==increaseNumber)
						{
							$('#addTimeA').removeAttr('onclick');
							document.getElementById("addTimeA").style.color="#909090";
						}
//						alertx("endTime="+endTime+" num="+num);
						document.getElementById("addTimeNumber").value=num;
						document.getElementById("environmentEndTime").value=endTime;
						GetRTime_addTime();
						auto=setInterval(GetRTime_addTime,0);
					},
					error:function(){

						alertx("延长时间失败");

					}
				});

			}




//			document.getElementById("environmentEndTime").value="2017/07/03 20:27:30";
//			GetRTime_addTime();
//			auto=setInterval(GetRTime_addTime,0);
		}
		function GetRTime_addTime(){
			var endTime=document.getElementById("environmentEndTime").value;
			var EndTime= new Date(endTime);
			var NowTime = new Date();
			var t =EndTime.getTime() - NowTime.getTime();
			var d=0;
			var h=0;
			var m=0;
			var s=0;
			if(t>=0){
				d=Math.floor(t/1000/60/60/24);
				h=Math.floor(t/1000/60/60%24);
				m=Math.floor(t/1000/60%60);
				s=Math.floor(t/1000%60);
			}else{
//							var id=document.getElementById('sceneEnvironmentInstanceId').value;
				clearInterval(auto);
				end1();
			}
			if(d<10)
				d="0"+d;
			if(h<10)
				h="0"+h;
			if(m<10)
				m="0"+m;
			if(s<10)
				s="0"+s;
//			document.getElementById("t_d").innerHTML = d ;
			document.getElementById("t_h").innerHTML = h ;
			document.getElementById("t_m").innerHTML = m ;
			document.getElementById("t_s").innerHTML = s ;



		}

		function aa(ctfEnvironmentId){
			var s = window.parent.document.getElementById("raceMaskDIV");
			s.style.display = "block";

			$.ajax({
				type: "POST",
				url: "${ctx}/resource/resourceCtfSubject/createCtfInstance",
				data: {
					ctfEnvironmentId:ctfEnvironmentId
				},
				success: function (list) {

					var s = window.parent.document.getElementById("raceMaskDIV");
					s.style.display = "none";
					$("#raceDiv").show();
					$('#crateRaceA').removeAttr('onclick');
					document.getElementById("crateRaceA").style.color="#909090";
					console.info(list[1]+" "+list[0]);
					document.getElementById("link").innerHTML = list[1];
					document.getElementById("link").href=list[1];
					document.getElementById("instanceId").value=list[2];
					function GetRTime(){
						var endTime=list[0];
//			var endTime=document.getElementById('endTime').value;
						var EndTime= new Date(endTime);
						var NowTime = new Date();
						var t =EndTime.getTime() - NowTime.getTime();
						var d=0;
						var h=0;
						var m=0;
						var s=0;
						if(t>=0){
							d=Math.floor(t/1000/60/60/24);
							h=Math.floor(t/1000/60/60%24);
							m=Math.floor(t/1000/60%60);
							s=Math.floor(t/1000%60);
						}else{
//							var id=document.getElementById('sceneEnvironmentInstanceId').value;
							clearInterval(auto);
							end();
						}
						if(d<10)
							d="0"+d;
						if(h<10)
							h="0"+h;
						if(m<10)
							m="0"+m;
						if(s<10)
							s="0"+s;
//			document.getElementById("t_d").innerHTML = d ;
						document.getElementById("t_h").innerHTML = h ;
						document.getElementById("t_m").innerHTML = m ;
						document.getElementById("t_s").innerHTML = s ;



					}
					auto=setInterval(GetRTime,0);
				},
				error:function(){
					var s = window.parent.document.getElementById("raceMaskDIV");
					s.style.display = "none";
					alertx("创建赛题失败");

				}
			});

		}
		function end1(id)
		{
			$("#raceDiv").hide();
			alert("实验时间已结束！");


		}
		function end(id)
		{

			$("#raceDiv").hide();
			alert("实验时间已结束！");
			<%--var s = window.parent.document.getElementById("maskDIVDelete");--%>
			<%--s.style.display = "block";--%>
			<%--$.ajax({--%>
				<%--type: "POST",--%>
				<%--url: "${ctx}/scene/sceneEnvironmentInstance/endExperiment",--%>
				<%--data: {--%>
					<%--instanceId:id--%>
				<%--},--%>
				<%--success: function () {--%>
					<%--var s = window.parent.document.getElementById("maskDIVDelete");--%>
					<%--s.style.display = "none";--%>
<%--//						window.history.go(-1);--%>
					<%--window.opener=null;window.open('','_self');window.close();--%>
				<%--},--%>
				<%--error:function(){--%>
					<%--var s = window.parent.document.getElementById("maskDIVDelete");--%>
					<%--s.style.display = "none";--%>
					<%--alert("未能结束实验");--%>
				<%--}--%>
			<%--});--%>

		}
	</script>
	<link rel="stylesheet" href="${ctx}/css/pdf/bootstrap.min.css">
	<style>
		#pdf{
			height: 800px;
		}
		#time{color: #97530e;}
		/*#raceDIV {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.3;*/
			/*/!*兼容IE8及以下版本浏览器*!/*/
			/*filter: alpha(opacity=30);display:none;*/
			/*bottom: 0;*/
			/*background-color: #393939}*/
	</style>
	<script src="http://www.lanrenzhijia.com/ajaxjs/pdfobject.js"></script>
	<script>
		window.onload = function (){
			var myPDF = new PDFObject({url: '${path}' + '${resourceCtfSubject.solution}'}).embed("pdf");
		};
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/resource/resourceCtfSet/stuCtfSetList/">CTF题目集列表</a></li>
		<li class="active"><a href="${ctx}/resource/resourceCtfSubject/stuEnterCtfSubjectForm?CtfSubjectId=${param.CtfSubjectId}">题目详情</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="resourceCtfSubject" action="#" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label">分值：</label>
			<div class="controls">
				<label class="lbl">${resourceCtfSubject.score}</label>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">类型：</label>
			<div class="controls">
				<label class="lbl">${resourceCtfSubject.ctfSubjectTypeId}</label>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">答题情况：</label>
			<div class="controls">
				<label class="lbl" id="answerSituation" name="answerSituation">
					<c:choose>
					<c:when test="${isAnswered=='false'}">
						未解答
					</c:when>
					<c:otherwise>
						已解答
					</c:otherwise>
				</c:choose>
				</label>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">题目：</label>
			<div class="controls">
				<label class="lbl">${resourceCtfSubject.stem}</label>
			</div>
		</div>
		<c:if test="${resourceCtfSubject.attachment!=null&&resourceCtfSubject.attachment!=''}">
			<div class="control-group">
				<div class="controls">
					<a href="${ctx}/resource/resourceCtfSubject/downloadDocFiles?ctfSubjectId=${resourceCtfSubject.id}">点击下载附件</a>
				</div>
			</div>
		</c:if>

		<c:set var="ctfEnvironmentId" value="${resourceCtfSubject.ctfEnvironmentId}" />
		<c:set var="tip" value="${tip}" />

		<c:if test="${not empty ctfEnvironmentId}" >
			<c:choose>
				<c:when test="${not empty tip}">
					<div class="control-group">
						<label class="control-label">提示：</label>
						<div class="controls">
							<label>${tip}<label/>
						</div>
					</div>
				</c:when>
				<c:otherwise>
					<div class="control-group">
						<div class="controls">
							<a href="#" class="crateRaceA" id="crateRaceA" name="crateRaceA" onclick="aa('${resourceCtfSubject.ctfEnvironmentId}')">点击创建赛题</a>
						</div>
					</div>
				</c:otherwise>
			</c:choose>

		</c:if>
		<div id="raceDiv" hidden>
			<div class="control-group">
				<div class="controls">
					<a href="#" id="link" target="_blank" style="color: red" >111</a>
						<%--<a href="${ctx}/resource/resourceCtfSubject/lookSolution?ctfSubjectId=${resourceCtfSubject.id}" target="_blank">查看解题思路</a>--%>
				</div>
				<div class="controls">
					<lable id="time">  
						 	<span id="t_h">00</span>时
						    <span id="t_m">00</span>分
						    <span id="t_s">00</span>秒
					</lable>


				</div>
				<c:if test="${not empty increaseNumber}">
					<div class="controls">
						<a href="#" class="addTimeA" id="addTimeA" name="addTimeA" onclick="addTime()">延长时间(${increaseTime}分钟/${increaseNumber}次)</a>
					</div>
				</c:if>

			</div>
		</div>
		<c:if test="${resourceCtfSubject.solution!=null&&resourceCtfSubject.solution!=''}">
			<div class="control-group">
				<div class="controls">
					<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
						查看解题思路
					</button>
					<%--<a href="${ctx}/resource/resourceCtfSubject/lookSolution?ctfSubjectId=${resourceCtfSubject.id}" target="_blank">查看解题思路</a>--%>
				</div>
			</div>
		</c:if>
		<input type="hidden" id="instanceId" name="instanceId">
		<input type="hidden" id="ctfEnvironmentId" name="ctfEnvironmentId" value="${resourceCtfSubject.ctfEnvironmentId}">
		<input type="hidden" id="ctfsubjectId" name="ctfsubjectId" value="${resourceCtfSubject.id}">
		<input type="hidden" id="ctfSetId" name="ctfSetId" value="${ctfSetId}">
		<input type="hidden" id="environmentEndTime" name="environmentEndTime">
		<input type="hidden" id="increaseTime" name="increaseTime" value="${increaseTime}">
		<input type="hidden" id="addTimeNumber" name="addTimeNumber" value="0">
		<input type="hidden" id="increaseNumber" name="increaseNumber" value="${increaseNumber}">

		<input type="hidden" id="answer" name="answer" value="${resourceCtfSubject.answer}">
		<div class="control-group">
			<label class="control-label">Flag：</label>
			<div class="controls">
				<input type="text" name="userAnswer" id="userAnswer" htmlEscape="false" maxlength="100" class="input-xlarge required"/>
			</div>
		</div>
		<%--<div class="control-group">--%>
			<%--<label class="control-label">解题思路：</label>--%>
			<%--<div class="controls">--%>
				<%--<form:textarea path="solution" htmlEscape="false" rows="4" maxlength="255" class="input-xxlarge" readonly="true"/>--%>
			<%--</div>--%>
		<%--</div>--%>
		<div class="form-actions">
			<input id="btnSubmit" class="btn btn-primary" type="button" value="提 交" onclick="judge()"/>&nbsp;
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>

	<!-- Modal -->
	<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-body">
					<div class="col-lg-pull-12" id="pdf"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>

	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<%--<div id='raceDIV'><i class='icon-spinner icon-spin white' style='font-size:550%;position: relative;top: 47%;left: 48%;'></i>" +--%>
		<%--"<span style='position: relative;color: white;top: 50%;left:39%;font-size:20px;'>创建赛题中...</span></div>--%>
</body>
</html>